<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>  body {
            margin: 0;
        }
        .container {
            width: 500px;
            height: 200px;
            position: relative;
        }

        .ring {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            border-style: solid;
            border-width: 10px;
        }

        .blue {
            border-color: #0180C3;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .yellow {
            border-color: #FEB131;
            left: 70px;
            top: 60px;
        }

        .yellow1 {
            z-index: 1;
            clip-path: polygon(0 0, 100% 100%, 0 100%);
        }

        .yellow2 {
            z-index: -1;
            clip-path: polygon(0 0, 100% 100%, 100% 0);
        }

        .black {
            border-color: black;
            left: 140px;
            top: 0px;
        }

        .black1 {
            z-index: -2;
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .black2 {
            z-index: 0;
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }

        .green {
            border-color: #059341;
            left: 210px;
            top: 60px;
        }

        .green1 {
            z-index: 1;
            clip-path: polygon(0 0, 100% 100%, 0 100%);
        }

        .green2 {
            z-index: -1;
            clip-path: polygon(0 0, 100% 100%, 100% 0);
        }

        .red {
            border-color: #FF0000;
            left: 280px;
            top: 0px;
        }

        .red1 {
            z-index: -2;
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .red2 {
            z-index: 0;
            clip-path: polygon(100% 100%, 100% 0, 0 100%);
        }</style>
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="ring blue"></div>
  <div class="ring yellow yellow1"></div>
  <div class="ring yellow yellow2"></div>
  <div class="ring black black1"></div>
  <div class="ring black black2"></div>
  <div class="ring green green1"></div>
  <div class="ring green green2"></div>
  <div class="ring red red1"></div>
  <div class="ring red red2"></div>
  </div>
</body>
</html>